<template>
  <el-dialog 
    v-model="visible" 
    title="权限不足" 
    width="500px"
    :before-close="handleClose"
    class="permission-error-dialog"
  >
    <div class="error-content">
      <!-- 错误图标 -->
      <div class="error-icon">
        <el-icon size="60" color="#f56c6c">
          <Lock />
        </el-icon>
      </div>
      
      <!-- 错误信息 -->
      <div class="error-message">
        <h3>{{ errorTitle }}</h3>
        <p class="error-description">{{ errorDescription }}</p>
      </div>
      
      <!-- 权限详情 -->
      <div v-if="permissionInfo" class="permission-details">
        <el-card shadow="never">
          <template #header>
            <span>权限详情</span>
          </template>
          
          <div class="detail-content">
            <div class="detail-item">
              <span class="label">所需权限：</span>
              <code class="value">{{ permissionInfo.requiredPermission }}</code>
            </div>
            
            <div v-if="permissionInfo.permissionDescription" class="detail-item">
              <span class="label">权限说明：</span>
              <span class="value">{{ permissionInfo.permissionDescription }}</span>
            </div>
            
            <div v-if="permissionInfo.suggestions" class="detail-item">
              <span class="label">解决建议：</span>
              <span class="value">{{ permissionInfo.suggestions }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">我知道了</el-button>
        <el-button type="primary" @click="handleContactAdmin">联系管理员</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Lock } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  error: {
    type: Object,
    default: null
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'close'])

// 响应式数据
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 计算属性
const errorTitle = computed(() => {
  if (!props.error) return '权限不足'
  
  const permissionInfo = props.error.permissionInfo
  if (permissionInfo?.permissionDescription) {
    return `缺少"${permissionInfo.permissionDescription}"权限`
  }
  
  return props.error.message || '权限不足'
})

const errorDescription = computed(() => {
  if (!props.error) return '您没有执行此操作的权限'
  
  return props.error.detail || props.error.message || '您没有执行此操作的权限'
})

const permissionInfo = computed(() => {
  return props.error?.permissionInfo
})

// 方法
const handleClose = () => {
  visible.value = false
  emit('close')
}

const handleContactAdmin = () => {
  // 这里可以实现联系管理员的逻辑
  // 比如跳转到帮助页面、发送邮件等
  ElMessage.info('请联系系统管理员为您分配相应权限')
  handleClose()
}
</script>

<style scoped>
.permission-error-dialog {
  .error-content {
    text-align: center;
    padding: 20px 0;
  }
  
  .error-icon {
    margin-bottom: 20px;
  }
  
  .error-message {
    margin-bottom: 25px;
    
    h3 {
      margin: 0 0 10px 0;
      color: #303133;
      font-size: 18px;
      font-weight: 600;
    }
    
    .error-description {
      margin: 0;
      color: #606266;
      font-size: 14px;
      line-height: 1.5;
    }
  }
  
  .permission-details {
    text-align: left;
    
    .detail-content {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .detail-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      
      .label {
        font-size: 14px;
        color: #606266;
        min-width: 80px;
        flex-shrink: 0;
      }
      
      .value {
        font-size: 14px;
        color: #303133;
        word-break: break-all;
        flex: 1;
        
        &.code,
        code {
          background: #f4f4f5;
          padding: 4px 8px;
          border-radius: 4px;
          font-family: 'Consolas', 'Monaco', monospace;
          border: 1px solid #e4e7ed;
          font-size: 12px;
        }
      }
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}
</style> 